<script lang="ts" setup>
import { ref, onMounted  } from 'vue';
import ShareCard from './ShareCard.vue';

const shareUrl = ref('');
const isShow = ref(false);
const share = () => {
  if (navigator.share) {
    navigator.share({
      url: shareUrl.value,
      title: document.title,
    }).catch(() => {});
  }
  else {
    isShow.value = true;
  }
};

onMounted(() => {
  shareUrl.value = window.location.href;
})
</script>

<template>
  <section class="page-header-share flex flex-shrink-0 items-stretch" v-bind="$attrs" ref="el">
    <button type="button" class="bg-transparent px-10" @click="share">
      <div class="i-icons:share size-24 text-#6e6e6e"></div>
    </button>
    <ShareCard v-if="isShow" :share-url="shareUrl" @close="() => { isShow = false }" />
  </section>
</template>

<style lang="scss" scoped>
</style>
